<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import {debounce} from "@/utils/debounce";
import { useRouter,useRoute } from 'vue-router';
import SvgIcon from "@/components/common/SvgIcon.vue";
const router = useRouter()
const route = useRoute()
// 是否滚动
const isScrolled = ref(false);
onMounted(() => {
  // 组件挂载时添加滚动事件监听
  window.addEventListener('scroll', handleScroll)
  // 页面加载时判断是否已经滚动
  handleScroll()
})
// 组件卸载时移除滚动事件监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
// 使用防抖函数优化滚动事件处理
const handleScroll = debounce(() => {
  isScrolled.value = window.scrollY > 0;
}, 100) // 等待时间设置为100毫秒
// 动态计算菜单栏样式类
// const menuClass = computed(() => ({
//   'nav': true,
//   'header-transparent': !isScrolled.value,
//   'header-white': isScrolled.value
// }))
// 为了提高可维护性，这里采用更灵活的实现方式
const menuClass = computed(() => {
  let classes: string[] = ['menu-bar']
  if (!isScrolled.value) {
    classes.push('menu-bar-transparent')
  } else {
    classes.push('menu-bar-white')
  }
  return classes.join(' ')
});
const showId = ref<number|null>(null);
const menuList = [
  {
    id: 1,
    navName: "首页",
    path: "/home",
    icon: "home",
  },
  // {
  //   id: 2,
  //   navName: "文章",
  //   path: "/article",
  //   icon: "article",
  //   subNavList: [
  //     {
  //       id: 6,
  //       navName: "分类",
  //       path: "/article/category",
  //       icon: "category"
  //     },
  //     {
  //       id: 7,
  //       navName: "标签",
  //       path: "/article/tag",
  //       icon: "tag"
  //     },
  //     {
  //       id: 8,
  //       navName: "合集",
  //       path: "/article/collection",
  //       icon: "collection"
  //     }
  //   ]
  // },
  {
    id: 3,
    navName: "归档",
    path: "/archives",
    icon: "archives"
  },
  {
    id: 4,
    navName: "相册",
    path: "/album",
    icon: "image"
  },
  {
    id: 5,
    navName: "外链",
    path: "/link",
    icon: "link"
  }
] as Menu[]
let closeSubMenuTimer: number | null = null; // 定义一个变量来保存延时器的ID
// 处理点击事件，点击最内层菜单项才进行路由跳转
const handleClick = (item: Menu) => {
  if (!item.subNavList || item.subNavList.length === 0) {
    router.push(item.path);
  } else {
    showId.value = item.id;
  }
}
const isLogin = computed(() => {
  return localStorage.getItem('token') != null
})
const isHeight = computed(() => {
  return route.path.startsWith('/article/info') || route.path.startsWith('/album')
})
const toLogin = () => {
  console.log('isLogin', isLogin.value)
  if (isLogin.value) {
    localStorage.removeItem('token')
  }
  router.push('/login')
}
// 修改mouseleave处理函数，添加延迟
const onMouseLeave = () => {
  closeSubMenuTimer = window.setTimeout(() => {
    showId.value = null;
  }, 100); // 延迟100毫秒关闭子菜单
}
// 新增一个方法来处理mouseover事件
const onMouseOver = (id: number) => {
  if (closeSubMenuTimer) {
    clearTimeout(closeSubMenuTimer); // 如果鼠标移回菜单，取消关闭子菜单的操作
    closeSubMenuTimer = null;
  }
  showId.value = id;
}
const toNav = (event:MouseEvent) => {
  // 阻止事件冒泡
  event.stopPropagation()
  router.push('/nav')
  // window.location.href ='/nav'
}
</script>

<template>
  <div :class="menuClass">
    <SvgIcon class-name="logo" icon-class="logo" @click="router.push('/home')"/>
    <div class="menu">
      <ul>
        <li v-for="menu in menuList"
            :key="menu.id"
            @mouseover="onMouseOver(menu.id)"
            @mouseleave="onMouseLeave"
        >
          <div :class="{selected: route.path.startsWith(menu.path)}" @click="handleClick(menu)">
            <SvgIcon class-name="icon" :icon-class="menu.icon" />
            {{menu.navName}}
          </div>
          <!-- 子菜单 -->
          <ul v-if="menu.subNavList && showId == menu.id">
            <li v-for="item in menu.subNavList" :key="item.id">
              <div @click="handleClick(item)">
                <SvgIcon class-name="icon" :icon-class="item.icon" />
                {{item.navName}}
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="search">
      <SvgIcon class-name="icon" icon-class="search"/>
      <input type="text" placeholder="搜索">
    </div>
    <div class="menu-bar-right">
<!--      <div class="chat" @click="router.push('/chat')">-->
<!--        <SvgIcon class-name="icon" icon-class="chat"/>-->
<!--        <span>聊天室</span>-->
<!--      </div>-->
      <div class="chat" @click="toNav">
        <SvgIcon class-name="icon" icon-class="跃迁"/>
        <span>跃迁</span>
      </div>
      <div class="user"
           @mouseover="onMouseOver(0)"
           @mouseleave="onMouseLeave"
      >
        <SvgIcon class-name="icon" icon-class="user"/>
        <div v-if="showId == 0" class="user-info" @click="toLogin">
          <SvgIcon class-name="icon" :icon-class="isLogin ? 'export' : 'into'"/>
          <span>{{isLogin ? '退出' : '登录'}}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="menu-bar-img">
    <img :style="{height: isHeight ? '573px' : '360px'}" :src="route.meta.imgUrl" alt="banner"/>
  </div>
</template>

<style scoped lang="less">
/* 菜单栏样式 */
.menu-bar{
  display: flex;
  position: fixed;
  width: 100%;
  height: 60px;
  top: 0;
  left: 0;
  box-sizing: border-box;
  transition: background-color 0.6s; /* 平滑的背景色过渡效果 */
  z-index: 1000; /* 确保头部在其他元素之上 */
  gap: 15px;
  .logo{
    margin: 16px 0;
    width: 135px;
    height: 30px;
    //transform: translate(50%, 0);
  }
  .menu{
    .icon{
      width: 16px;
      height: 16px;
    }
    /* 导航菜单样式定义 */
    & ul {
      display: flex; /* 使用弹性布局 */
      list-style: none; /* 移除列表样式 */
      padding: 0;
      margin: 0;
      /* 导航菜单项样式定义 */
      li {
        position: relative; /* 相对定位，以便于绝对定位子元素 */
        div {
          /* 链接样式定义 */
          color: inherit; /* 继承父元素文字颜色 */
          font-size: 16px;
          line-height: 60px;
          text-align: center; /* 垂直居中 */
          padding: 0 12px;

          /* 当链接被选中时的样式 */
          &.selected {
            color: #EB5C88; /* 设置选中链接的颜色 */
            //border-bottom: 3px solid #EB5C88;
          }
        }
        &:hover {
          cursor: pointer; /* 鼠标悬停时显示指针形状 */
          //color: #EB5C88;
          //border-bottom: 3px solid #EB5C88;
          //border-radius: 0.8px; /* 最后两个值对应底部左和底部右的圆角大小 */
        }
        & ul{
          position: absolute; /* 绝对定位 */
          top: 100%; /* 位于父元素下方 */
          left: 50%; /* 对齐父元素左侧 */
          list-style: none; /* 移除列表样式 */
          padding: 10px;
          margin-top: 10px;
          transform: translate(-50%, 0);
          background: #FFFFFF;
          border-radius: 8px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.35);
          color: #555555;
          li{
            margin: auto;
            border-radius: 4px;
            div{
              font-size: 14px;
              line-height: 32px;
              color: inherit; /* 继承父元素文字颜色 */
              display: flex;
              align-items: center;
              justify-items: center;
            }
            &:hover {
              background: #EB5C88;
              color: #FFFFFF;
            }
          }
          &:after {
            position: absolute;
            bottom: calc(100% - 8px); /* 改为bottom定位 */
            left: 50%;
            border: 8px solid transparent;
            border-bottom: 8px solid #FFFFFF; /* 修改为底部边框为白色 */
            transform: translate(-50%, -50%);
            content: '';
          }
        }
      }
    }
    & >ul >li:hover{
      border-bottom: 3px solid #EB5C88;
    }
  }
}
.menu-bar-transparent{
  background-color: transparent; /* 透明背景 */
  //background-color: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  .search{
    .icon{
      color: #FFF;
    }
    input{
      color: #FFF;
      border: 1px solid #F1F1F1;
      background-color: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(8.1px);
      &::placeholder {
        color: #F1F1F1;
      }
      &:focus {
        border: 1px solid #EB5C88;
      }
      &:hover {
        border: 1px solid #EB5C88;
      }
    }
  }
}
.menu-bar-white{
  background-color: white;
  color: #555555;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
  .search{
    .icon{
      color: #555555;
    }
    input{
      color: #555555;
      border: 1px solid #E0E0E0;
      background-color: rgba(255, 255, 255, 0.12);
      &::placeholder {
        color: #999999;
      }
      &:focus {
        border: 1px solid #555555;
      }
      &:hover {
        border: 1px solid #555555;
      }
    }
  }
}
.menu-bar-img{
  position: relative;
  img{
    width: 100%;
    object-fit: cover; /* 保持宽高比缩放图片 */
    object-position: center; /* 将图片中心对齐 */
  }
  &:after{
    z-index: 1;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(0deg, rgba(242, 242, 244, 1) 13.6%, rgba(255, 255, 255, 0) 86.4%);
  }
}
.search {
  display: flex;
  align-items: center;
  margin: 0 auto;
  position: relative;
  .icon {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    transform: translate(-50%, -50%);
    z-index: 1;
    &:hover {
      cursor: pointer;
    }
  }
  input {
    height: 32px;
    width: 400px;
    border-radius: 8px;
    padding: 0 32px;
    margin-left: 16px;
    outline: none;
    box-sizing: border-box;
  }
}
.menu-bar-right{
  margin-left: auto;
  display: flex;
  align-items: center; /* 水平居中 */
  //justify-items: center; /* 垂直居中 */
  div{
    &:hover {
      cursor: pointer; /* 鼠标悬停时显示指针形状 */
    }
  }
  .chat{
    display: flex;
    flex-direction: column; /* 垂直居中 */
    font-size: 10px;
    .icon{
      width: 24px;
      height: 24px;
    }
  }
  .user{
    position: relative;
    padding: 20px 0;
    .user-info{
      position: absolute;
      width: 72px;
      height: 38px;
      top: 100%;
      left: 50%;
      transform: translate(-50%, 0);
      background-color: #FFFFFF;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 0;
      span{
        margin-left: 4px;
        font-size: 14px;
        line-height: 38px;
        text-align: center;
      }
      .icon{
        margin: 3px 0;
        width: 16px;
        height: 16px;
      }
      &:hover {
        background: #EB5C88;
        color: #FFFFFF;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .menu-bar{
    padding: 0 20px;
  }
  .icon{
    width: 32px !important;
    height: 32px !important;
  }
  .menu > ul {
    justify-content: space-between;
    min-width: 83.3vw !important;
    li {
      margin: auto;
      div{
        display: flex;
        align-items: center;
        justify-items: center;
        font-size: 0 !important;
      }
      & ul > li > div{
        width: 38px !important;
      }
    }
  }
  .logo{
    display: none;
  }
  .search{
    display: none !important;
  }
  .chat{
    display: none !important;
  }
  .user{
    width: 16.6vw;
    display: flex;
    align-items: center;
    .user-info{
      width: 38px !important;
      span{
        display: none;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .menu-bar{
    padding: 0 80px;
  }
  .menu ul li div{
    width: 56px;
  }
  .menu-bar-right{
    div{
      margin-left: 24px;
      &:hover {
        cursor: pointer; /* 鼠标悬停时显示指针形状 */
      }
    }
  }
  .user .icon{
    width: 40px;
    height: 40px;
  }
}
</style>
